CSS Modules 教程

1. 简介

CSS Modules 是一种在现代前端开发中处理 CSS 的方法，它允许你将 CSS 样式封装在模块中，避免全局命名冲突，并使样式更具可维护性和可重用性。CSS Modules 通常与 React、Vue 等现代前端框架结合使用。

1.1 为什么使用 CSS Modules？

• 避免全局命名冲突：在大型项目中，不同组件的 CSS 类名可能会冲突，CSS Modules 通过生成唯一的类名来解决这个问题。
• 模块化：每个组件的样式可以独立管理，不会影响其他组件。
• 可维护性：样式与组件紧密结合，便于维护和调试。

2. 基本概念

2.1 局部作用域

在 CSS Modules 中，每个 CSS 文件都被视为一个独立的模块。模块内的类名只在当前模块内有效，不会影响全局。

2.2 类名映射

CSS Modules 通过编译工具（如 Webpack 的 css-loader）将 CSS 类名映射为唯一的哈希字符串，从而避免命名冲突。

3. 使用 CSS Modules

3.1 安装和配置

首先，你需要安装 css-loader 和 style-loader（如果使用 Webpack）：

npm install css-loader style-loader --save-dev

然后在 Webpack 配置文件中添加以下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

3.2 编写 CSS 模块

创建一个名为 Button.module.css 的文件：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

3.3 在组件中使用 CSS 模块

在 React 组件中使用 CSS 模块：

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return <button className={styles.button}>Click me</button>;
};

export default Button;

3.4 查看生成的类名

在浏览器中查看生成的 HTML，你会发现类名已经被转换为唯一的哈希字符串：

<button class="Button_button__12345">Click me</button>

4. 高级用法

4.1 组合类名

你可以通过组合多个类名来应用多个样式：

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

在组件中使用：

import React from 'react';
import styles from './Button.module.css';

const Button = ({ disabled }) => {
  return (
    <button
      className={`${styles.button} ${disabled ? styles.disabled : ''}`}
    >
      Click me
    </button>
  );
};

export default Button;

4.2 全局样式

如果你需要使用全局样式，可以使用 :global 关键字：

/* Button.module.css */
:global(.global-class) {
  font-size: 20px;
}

在组件中使用：

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    <button className={`${styles.button} global-class`}>
      Click me
    </button>
  );
};

export default Button;

5. 实践练习

5.1 创建一个简单的组件

1. 创建一个名为 Card.module.css 的文件，定义一个卡片样式。
2. 创建一个名为 Card.js 的 React 组件，使用 Card.module.css 中的样式。
3. 在主应用中引入并使用 Card 组件。

5.2 组合样式

1. 在 Card.module.css 中添加一个 highlight 类，用于高亮显示卡片。
2. 在 Card.js 组件中根据某个条件动态应用 highlight 类。

6. 总结

CSS Modules 是一种强大的工具，可以帮助你更好地组织和管理 CSS 样式。通过局部作用域和类名映射，它有效地解决了全局命名冲突的问题，并提高了代码的可维护性。掌握 CSS Modules 将使你在现代前端开发中更加得心应手。

7. 进一步学习

• CSS-in-JS：探索如何在 JavaScript 中直接编写 CSS。
• CSS 预处理器：学习使用 Sass 或 Less 来增强 CSS 的功能。
• CSS 架构：了解如何使用 BEM、OOCSS、ITCSS 等方法来组织大型项目的 CSS。

通过不断实践和学习，你将能够更深入地理解 CSS Modules 及其在现代前端开发中的应用。